<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户管理 - 王氏美容汽车集团管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            --secondary-gradient: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
            --royal-gold: #ffd700;
        }

        body {
            background: var(--primary-gradient);
            min-height: 100vh;
            font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="crown" patternUnits="userSpaceOnUse" width="100" height="100"><path d="M20,80 L30,60 L40,70 L50,50 L60,70 L70,60 L80,80 Z" fill="none" stroke="rgba(255,215,0,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23crown)"/></svg>') repeat;
            opacity: 0.3;
            z-index: -1;
        }

        .navbar {
            background: rgba(0,0,0,0.2) !important;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .navbar-brand {
            color: var(--royal-gold) !important;
            font-weight: 700;
            font-size: 1.3rem;
        }

        .nav-link {
            color: rgba(255,255,255,0.9) !important;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .nav-link:hover, .nav-link.active {
            color: var(--royal-gold) !important;
            transform: translateY(-1px);
        }

        .content-wrapper {
            background: rgba(255,255,255,0.05);
            backdrop-filter: blur(10px);
            border-radius: 25px;
            padding: 2rem;
            margin: 2rem 0;
        }

        .page-title {
            color: white;
            font-weight: 700;
            font-size: 2.5rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            margin-bottom: 0.5rem;
        }

        .page-subtitle {
            color: rgba(255,255,255,0.8);
            font-size: 1.1rem;
            margin-bottom: 2rem;
        }

        .search-card {
            background: rgba(255, 255, 255, 0.95);
            border: none;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }

        .customer-card {
            background: rgba(255, 255, 255, 0.95);
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .customer-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }

        .member-badge {
            font-size: 0.8rem;
        }

        .action-buttons .btn {
            margin: 0 2px;
        }

        .card {
            background: rgba(255, 255, 255, 0.95);
            border: none;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }

        .btn-primary {
            background: var(--secondary-gradient);
            border: none;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">
                <i class="fas fa-crown me-2"></i>王氏美容汽车集团
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/dashboard">
                            <i class="fas fa-tachometer-alt me-1"></i>仪表盘
                        </a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="fas fa-users me-1"></i>客户管理
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item active" href="/customers"><i class="fas fa-list me-2"></i>客户列表</a></li>
                            <li><a class="dropdown-item" href="/customers/new"><i class="fas fa-plus me-2"></i>新增客户</a></li>
                            <li><a class="dropdown-item" href="/dashboard/customers"><i class="fas fa-chart-bar me-2"></i>客户统计</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="fas fa-chart-line me-1"></i>统计分析
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/dashboard/orders"><i class="fas fa-shopping-cart me-2"></i>订单统计</a></li>
                            <li><a class="dropdown-item" href="/dashboard/materials"><i class="fas fa-boxes me-2"></i>材料统计</a></li>
                            <li><a class="dropdown-item" href="/dashboard/finance"><i class="fas fa-dollar-sign me-2"></i>财务统计</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/modules">
                            <i class="fas fa-th-large me-1"></i>功能模块
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="fas fa-user-crown me-1"></i>管理员
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/profile"><i class="fas fa-user me-2"></i>个人资料</a></li>
                            <li><a class="dropdown-item" href="/settings"><i class="fas fa-cog me-2"></i>系统设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout"><i class="fas fa-sign-out-alt me-2"></i>退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <!-- 页面标题 -->
        <div class="text-center py-4">
            <h1 class="page-title">
                <i class="fas fa-users me-3"></i>客户管理
            </h1>
            <p class="page-subtitle">管理客户信息，维护客户关系，提升服务品质</p>
        </div>

        <div class="content-wrapper">
            <!-- 操作按钮 -->
            <div class="row mb-4">
                <div class="col-auto ms-auto">
                    <a href="/customers/new" class="btn btn-primary btn-lg">
                        <i class="fas fa-plus me-2"></i>新增客户
                    </a>
                </div>
            </div>

        <!-- 搜索表单 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card search-card">
                    <div class="card-body">
                        <form method="get" action="/customers">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label for="name" class="form-label">客户姓名</label>
                                    <input type="text" class="form-control" id="name" name="name" 
                                           th:value="${searchName}" placeholder="请输入客户姓名">
                                </div>
                                <div class="col-md-3">
                                    <label for="phone" class="form-label">手机号码</label>
                                    <input type="text" class="form-control" id="phone" name="phone" 
                                           th:value="${searchPhone}" placeholder="请输入手机号码">
                                </div>
                                <div class="col-md-3">
                                    <label for="carNumber" class="form-label">车牌号码</label>
                                    <input type="text" class="form-control" id="carNumber" name="carNumber" 
                                           th:value="${searchCarNumber}" placeholder="请输入车牌号码">
                                </div>
                                <div class="col-md-3">
                                    <label for="memberLevel" class="form-label">会员等级</label>
                                    <select class="form-select" id="memberLevel" name="memberLevel">
                                        <option value="">全部等级</option>
                                        <option th:each="level : ${memberLevels}" 
                                                th:value="${level}" 
                                                th:text="${level}"
                                                th:selected="${level == searchMemberLevel}">
                                        </option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-search me-2"></i>搜索
                                    </button>
                                    <a href="/customers" class="btn btn-outline-secondary ms-2">
                                        <i class="fas fa-undo me-2"></i>重置
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 成功/错误消息 -->
        <div th:if="${param.success}" class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>操作成功！
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        <div th:if="${param.deleted}" class="alert alert-info alert-dismissible fade show" role="alert">
            <i class="fas fa-info-circle me-2"></i>客户已删除！
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        <div th:if="${param.error}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>操作失败：<span th:text="${param.error}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>

        <!-- 客户列表 -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-white">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-list me-2"></i>客户列表
                                <span class="badge bg-primary ms-2" th:text="${customers.totalElements}">0</span>
                            </h5>
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="toggleView('card')">
                                    <i class="fas fa-th-large"></i> 卡片视图
                                </button>
                                <button type="button" class="btn btn-outline-primary btn-sm active" onclick="toggleView('table')">
                                    <i class="fas fa-table"></i> 表格视图
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- 表格视图 -->
                        <div id="tableView">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead class="table-light">
                                        <tr>
                                            <th>会员卡号</th>
                                            <th>客户姓名</th>
                                            <th>手机号码</th>
                                            <th>车牌号码</th>
                                            <th>会员等级</th>
                                            <th>余额</th>
                                            <th>积分</th>
                                            <th>注册时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr th:each="customer : ${customers.content}">
                                            <td>
                                                <span class="badge bg-secondary" th:text="${customer.cardNo}">CB001</span>
                                            </td>
                                            <td>
                                                <strong th:text="${customer.name}">张三</strong>
                                            </td>
                                            <td th:text="${customer.phone}">13800138001</td>
                                            <td th:text="${customer.carNumber}">京A12345</td>
                                            <td>
                                                <span class="badge member-badge"
                                                      th:classappend="${customer.memberLevel == 'VIP会员'} ? 'bg-danger' : 
                                                                     (${customer.memberLevel == '金卡会员'} ? 'bg-warning' : 
                                                                     (${customer.memberLevel == '银卡会员'} ? 'bg-info' : 'bg-secondary'))"
                                                      th:text="${customer.memberLevel}">普通会员</span>
                                            </td>
                                            <td>
                                                <span class="text-success">¥<span th:text="${#numbers.formatDecimal(customer.balance, 0, 2)}">0.00</span></span>
                                            </td>
                                            <td>
                                                <span class="text-warning" th:text="${customer.points}">0</span>
                                            </td>
                                            <td th:text="${#temporals.format(customer.createdAt, 'yyyy-MM-dd')}">2024-01-01</td>
                                            <td>
                                                <div class="action-buttons">
                                                    <a th:href="@{/customers/{id}(id=${customer.id})}" 
                                                       class="btn btn-outline-info btn-sm" title="查看详情">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a th:href="@{/customers/{id}/edit(id=${customer.id})}" 
                                                       class="btn btn-outline-primary btn-sm" title="编辑">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <button type="button" class="btn btn-outline-danger btn-sm" 
                                                            title="删除" th:onclick="'deleteCustomer(' + ${customer.id} + ')'">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr th:if="${customers.content.empty}">
                                            <td colspan="9" class="text-center text-muted py-4">
                                                <i class="fas fa-inbox fa-3x mb-3"></i>
                                                <p>暂无客户数据</p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- 卡片视图 -->
                        <div id="cardView" style="display: none;">
                            <div class="row">
                                <div class="col-lg-4 col-md-6 mb-3" th:each="customer : ${customers.content}">
                                    <div class="card customer-card">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-start mb-2">
                                                <h6 class="card-title mb-0" th:text="${customer.name}">张三</h6>
                                                <span class="badge member-badge"
                                                      th:classappend="${customer.memberLevel == 'VIP会员'} ? 'bg-danger' : 
                                                                     (${customer.memberLevel == '金卡会员'} ? 'bg-warning' : 
                                                                     (${customer.memberLevel == '银卡会员'} ? 'bg-info' : 'bg-secondary'))"
                                                      th:text="${customer.memberLevel}">普通会员</span>
                                            </div>
                                            <p class="card-text">
                                                <small class="text-muted">
                                                    <i class="fas fa-id-card me-1"></i><span th:text="${customer.cardNo}">CB001</span><br>
                                                    <i class="fas fa-phone me-1"></i><span th:text="${customer.phone}">13800138001</span><br>
                                                    <i class="fas fa-car me-1"></i><span th:text="${customer.carNumber}">京A12345</span>
                                                </small>
                                            </p>
                                            <div class="d-flex justify-content-between mb-2">
                                                <span class="text-success">余额: ¥<span th:text="${#numbers.formatDecimal(customer.balance, 0, 2)}">0.00</span></span>
                                                <span class="text-warning">积分: <span th:text="${customer.points}">0</span></span>
                                            </div>
                                            <div class="action-buttons">
                                                <a th:href="@{/customers/{id}(id=${customer.id})}" 
                                                   class="btn btn-outline-info btn-sm">
                                                    <i class="fas fa-eye me-1"></i>详情
                                                </a>
                                                <a th:href="@{/customers/{id}/edit(id=${customer.id})}" 
                                                   class="btn btn-outline-primary btn-sm">
                                                    <i class="fas fa-edit me-1"></i>编辑
                                                </a>
                                                <button type="button" class="btn btn-outline-danger btn-sm" 
                                                        th:onclick="'deleteCustomer(' + ${customer.id} + ')'">
                                                    <i class="fas fa-trash me-1"></i>删除
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12" th:if="${customers.content.empty}">
                                    <div class="text-center text-muted py-5">
                                        <i class="fas fa-inbox fa-3x mb-3"></i>
                                        <p>暂无客户数据</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 分页 -->
                        <nav th:if="${customers.totalPages > 1}" aria-label="客户列表分页">
                            <ul class="pagination justify-content-center">
                                <li class="page-item" th:classappend="${customers.first} ? 'disabled'">
                                    <a class="page-link" th:href="@{/customers(page=${customers.number - 1}, size=${customers.size}, name=${searchName}, phone=${searchPhone}, carNumber=${searchCarNumber}, memberLevel=${searchMemberLevel})}">
                                        上一页
                                    </a>
                                </li>
                                <li class="page-item" th:each="i : ${#numbers.sequence(0, customers.totalPages - 1)}"
                                    th:classappend="${i == customers.number} ? 'active'">
                                    <a class="page-link" th:href="@{/customers(page=${i}, size=${customers.size}, name=${searchName}, phone=${searchPhone}, carNumber=${searchCarNumber}, memberLevel=${searchMemberLevel})}"
                                       th:text="${i + 1}">1</a>
                                </li>
                                <li class="page-item" th:classappend="${customers.last} ? 'disabled'">
                                    <a class="page-link" th:href="@{/customers(page=${customers.number + 1}, size=${customers.size}, name=${searchName}, phone=${searchPhone}, carNumber=${searchCarNumber}, memberLevel=${searchMemberLevel})}">
                                        下一页
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>确定要删除这个客户吗？此操作不可撤销。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <form id="deleteForm" method="post" style="display: inline;">
                        <button type="submit" class="btn btn-danger">确认删除</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 页面脚本 -->
    <script>
        // 切换视图
        function toggleView(viewType) {
            const tableView = document.getElementById('tableView');
            const cardView = document.getElementById('cardView');
            const buttons = document.querySelectorAll('.btn-group .btn');
            
            buttons.forEach(btn => btn.classList.remove('active'));
            
            if (viewType === 'card') {
                tableView.style.display = 'none';
                cardView.style.display = 'block';
                buttons[0].classList.add('active');
            } else {
                tableView.style.display = 'block';
                cardView.style.display = 'none';
                buttons[1].classList.add('active');
            }
        }

        // 删除客户
        function deleteCustomer(customerId) {
            const deleteForm = document.getElementById('deleteForm');
            deleteForm.action = '/customers/' + customerId + '/delete';
            
            const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
            deleteModal.show();
        }
    </script>
</body>
</html>
